<template>
    <div class="govern-right">
        <div class="item">
          <div class="title">项目建设情况</div>
          <div class="content">
            <div class="box">
              项目在建柱状图
            </div>
            
          </div>
        
        </div>
        <div class="item2">
          <div class="title">近期项目清单</div>
          <div class="content">
            <div class="box">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="最近完工项目" name="first">项目建设清单</el-tab-pane>
                    <el-tab-pane label="最新开建项目" name="second">最新开建项目</el-tab-pane>
                    
                </el-tabs>
            </div>
            
          </div>
        
        </div>

        
        <!-- <img src="../assets/images/左侧@2x.png" alt=""> -->
      
    
    </div>
</template>
<script>


export default{
    data(){
        return{
            activeName: 'first'
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
    
}
</script>
<style  scoped lang="scss">
.govern-right{
    position: relative;
    float: right;
    margin-top: -100px ;
    .item{
      .title{
        font-size: 16px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 320px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        .box{
          width: 80%;
          height: 80%;
          color: #fff;
        //   border: 1px solid #ccc;
          
        }
        
        

      }
    }
    .item2{
      margin-top: 100px;
      .title{
        font-size: 16px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 350px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        // padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        // padding-top: 30px;
        
        .box{
          width: 100%;
          height: 80%;
        //   border: 1px solid #ccc;
          ::v-deep .el-tabs{
            color: #fff;
            .el-tabs__item{
                color: #fff ;
            }
            .el-tabs__item.is-active {
                color: #409EFF;
            }
          }
        }
      }
    }
    
  }
</style>